<template>
  <Checkbox class="m-checkbox" v-bind="$attrs" v-on="$listeners">
    <slot/>
  </Checkbox>
</template>

<script>
import { Checkbox } from 'element-ui'

export default {
  name: 'MCheckbox',
  components: { Checkbox },
  props: {
    MSize: 'default'
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.m-checkbox {

  /deep/ .el-checkbox__input {
    &.is-focus {
      .el-checkbox__inner {
        border-color: $theme-color-1;
      }
    }

    &:hover {
      .el-checkbox__inner {
        border-color: $theme-color-1;
      }
    }

    &.is-checked {
      .el-checkbox__inner {
        border-color: $theme-color-1;
        background-color: $theme-color-1;
      }
    }
  }

  /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
    color: $theme-color-1;
  }
}
</style>
